<template>
  <div>
    <h2 style="color: #FFFFFF;margin: 64px 0 20px 0; display: flex;flex-wrap: wrap;justify-content: center;">
      基础监控
    </h2>

    <div class="item_group" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px;">

      <cpu-ram-io-item :cpu-percentage-p=cpuramio.cpu :ram-percentage-p=cpuramio.ram :io-percentage-p=cpuramio.io
                       ></cpu-ram-io-item>

      <disk-item v-for="disk in disks" :diskTypeP=disk.diskType :color-p="disk.color" :name-p="disk.name"
                 :percentage-p="disk.percentage"></disk-item>
    </div>


    <div class="item_group" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); gap: 10px;margin-top: 10px">

      <hardware-item-route style="min-width: 600px;" @openWindow="$refs.dashboard_drawer_iframe.open('Route','https://route.indsvr.com')"></hardware-item-route>
      <hardware-item-ups style="min-width: 600px;" @openWindow="$refs.dashboard_drawer_iframe.open('UPS','https://ups.indsvr.com/ViewPower')"></hardware-item-ups>

      <hardware-item-bastion style="min-width: 600px;" ></hardware-item-bastion>

    </div>


    <h2 style="color: #FFFFFF;margin: 64px 0 20px 0; display: flex;flex-wrap: wrap;justify-content: center;">
      实例控制区
    </h2>

    <el-divider style="margin: 40vw"/>

    <div class="item_group" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 10px;margin-top: 6px;">

        <div style="min-width: 400px;" >
          <h3 style="color: #FFFFFF;width: 100%;text-align: center;">VM</h3>
          <div class="item_group_control">

            <monitor-item name-p="虚拟机1" id-p="vm-100" type-p="vm" @openWindow="$refs.dashboard_drawer_iframe.open('虚拟机1','/cmd.html')"></monitor-item>

            <monitor-item v-for="item in disks" :name-p="item.name" id-p="vm-100" type-p="vm" @openWindow="$refs.dashboard_drawer_iframe.open(item.name,'/cmd.html')"></monitor-item>

          </div>
        </div>

        <div style="min-width: 400px;">
          <h3 style="color: #FFFFFF;width: 100%;text-align: center;">LXC</h3>
          <div class="item_group_control" >

            <monitor-item type-p="lxc"></monitor-item>

          </div>
        </div>

        <div style="min-width: 400px;">
          <h3 style="color: #FFFFFF;width: 100%;text-align: center;">Docker</h3>
          <div class="item_group_control" >

            <monitor-item type-p="docker"></monitor-item>

          </div>
        </div>


    </div>

    <dashboard_drawer_iframe ref="dashboard_drawer_iframe"></dashboard_drawer_iframe>

  </div>

</template>

<script>
import CpuRamIoItem from "@/components/Dashboard/item/CpuRamIoItem/index.vue";
import DiskItem from "@/components/Dashboard/item/DiskItem/index.vue";
import MonitorItem from "@/components/Dashboard/item/MonitorItem/index.vue";
import DraggableWindow from "@/components/DraggableWindow/index.vue";
import HardwareItemBastion from "@/components/Dashboard/item/HardwareItem/bastion.vue";
import HardwareItemRoute from "@/components/Dashboard/item/HardwareItem/route.vue";
import HardwareItemUps from "@/components/Dashboard/item/HardwareItem/ups.vue";
import Dashboard_drawer_iframe from "@/components/Dashboard/Drawer/iframe.vue";

export default {
  name: "dashboard_panel_monitor",
  components: {
    Dashboard_drawer_iframe,
    HardwareItemUps,
    HardwareItemRoute,
    HardwareItemBastion, DraggableWindow, MonitorItem, DiskItem, CpuRamIoItem},
  props: {
    title: {
      type: String,
      default: "IndSvr-行动"
    }
  },
  data() {
    return {
      cpuramio: {
        cpu: 22,
        ram: 53,
        io: 35,
      },
      disks: [
        {
          name: "USB",
          diskType: "usb",
          percentage: 60,
          color: "#0081ff"
        },
        {
          name: "DISK",
          diskType: "disk",
          percentage: 90,
          color: "#0081ff"
        },
        {
          name: "ISCSI",
          diskType: "iscsi",
          percentage: 30,
          color: "#0081ff"
        },
        {
          name: "SMB",
          diskType: "smb",
          percentage: 50,
          color: "#0081ff"
        },
        {
          name: "SMB",
          diskType: "nfs",
          percentage: 90,
          color: "#0081ff"
        },
        {
          name: "SMB",
          diskType: "smb",
          percentage: 50,
          color: "#0081ff"
        },
        {
          name: "SMB",
          diskType: "nfs",
          percentage: 90,
          color: "#0081ff"
        },
        {
          name: "ISCSI",
          diskType: "iscsi",
          percentage: 30,
          color: "#0081ff"
        },
        {
          name: "SMB",
          diskType: "smb",
          percentage: 50,
          color: "#0081ff"
        }
      ],
      iframe_vis: false,
      iframe_title: "详情",
      iframe_href: "/"
    }
  },
  methods: {

  },
  computed: {


  },
  filters: {

  }
}
</script>
<style scoped>
/* 隐藏 IE、Edge 和 Firefox 的滚动条 */
.item_group {
  flex-wrap: wrap;
  justify-content: center;
  overflow: auto;
}
.item_group_control {
  color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  padding: 0.4vw 0.4vw;
  border-radius: 1.4vw;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: left;
  //margin: 0.8vw;
  //width: 25vw;
  //min-height: 600px;
  display: flex;
  flex-wrap: wrap;
  //justify-content: center;
  overflow: auto;
}
.item_group_control::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}


</style>
